<template>
    <!-- 底部导航条 -->
    <div class="bottom_bar_wrapper">
      <router-link :to="'/campus/index'" class="bar_item index">
        校招
      </router-link>
      <router-link :to="'/campus/preach'" class="bar_item career_talk">
        宣讲会
      </router-link>
      <router-link :to="'/campus/election'" class="bar_item doubleElection">
        双选会
      </router-link>
      <router-link :to="'/campus/school'" class="bar_item school" >
        院校
      </router-link>
      <router-link :to="'/member/login'" class="bar_item login">
        我的
      </router-link>
    </div>
</template>

<script>
export default{}
</script>

<style lang="scss" scoped>
  /* 底部导航 */
.bottom_bar_wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.05);
  height: 53px;
  z-index: 3;
  background: #fff;
}

.bottom_bar_wrapper .bar_item {
  flex: 1;
  text-align: center;
  color: #555555;
  font-size: 12px;
  padding: 35px 0 3px;
}

.bottom_bar_wrapper .bar_item {
  &.career_talk {  //宣讲会
    background: url(../../../assets/images/campus/bar_1.png) no-repeat center 8px  /21.5px 21.5px;
  }
  &.index {  //校招
    background: url(../../../assets/images/campus/bar_2.png) no-repeat center 8px  /21.5px 21.5px;
  }
  &.doubleElection {  //双选会
    background: url(../../../assets/images/campus/bar_3.png) no-repeat center 8px  /21.5px 21.5px;
  }
  &.school {  //院校
    background: url(../../../assets/images/campus/bar_4.png) no-repeat center 8px  /21.5px 21.5px;
  }
  &.login {  //我的
    background: url(../../../assets/images/campus/bar_5.png) no-repeat center 8px  /21.5px 21.5px;
  }
  &.router-link-active {
    &.career_talk {  //宣讲会
      background: url(../../../assets/images/campus/bar_1_active.png) no-repeat center 8px  /21.5px 21.5px;
      color: #00ce85;
    }
    &.index {  //校招
      background: url(../../../assets/images/campus/bar_2_active.png) no-repeat center 8px  /21.5px 21.5px;
      color: #00ce85;
    }
    &.doubleElection {  //双选会
      background: url(../../../assets/images/campus/bar_3_active.png) no-repeat center 8px  /21.5px 21.5px;
      color: #00ce85;
    }
    &.school {  //院校
      background: url(../../../assets/images/campus/bar_4_active.png) no-repeat center 8px  /21.5px 21.5px;
      color: #00ce85;
    }
    &.login {  //我的
      background: url(../../../assets/images/campus/bar_5_active.png) no-repeat center 8px  /21.5px 21.5px;
      color: #00ce85;
    }
  }
}

.bottom_bar_wrapper .bar_item img {
  width: 21.5px;
  height: 21.5px;
  display: block;
  margin: 0 auto;
}
</style>
